<template>
  <div class="main-content">
    <div class="view">
      <el-button type="primary" @click="fanhui">返回</el-button>
      <div class="flex-1">
        <el-steps :active="stepsactive" simple>
          <el-step title="选择服务" icon="el-icon-edit"> </el-step>
          <el-step title="服务详情" icon="el-icon-date"> </el-step>
          <el-step title="下单服务" icon="el-icon-upload2"></el-step>
          <el-step title="结束" icon="el-icon-check"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="view-content">
      <el-row :gutter="20" v-if="stepsactive === 1">
        <el-col :span="6" v-for="item in serve" :key="item.name">
          <div class="card" @click="bindselectservice(item)">
            <img :src="item.img" alt="" style="width: 100%; height: 170px" />
            <div style="margin: 5px 0; font-size: 26px" class="view-item-label">
              {{ item.label }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="view-content">
      <router-view />
    </div>
  </div>
</template>

<script>
import serve1 from "@/assets/imgs/serve/serve-1.jpg";

export default {
  name: "select_service",
  data() {
    return {
      serve: [
        {
          label: "日常保洁",
          img: serve1,
          name: "rcbj-serve-detail",
          stepsactive: 2,
        },
        {
          label: "厨房保养",
          img: serve1,
          name: "chufang-serve-dateil",
          stepsactive: 2,
        },
        {
          label: "卫生间",
          img: serve1,
          name: "weishengjian-serve-detail",
          stepsactive: 2,
        },
        {
          label: "檫玻璃",
          img: serve1,
          stepsactive: 2,
          name: "chaboli-serve-detail",
        },
      ],
      stepsactive: 1,
    };
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        console.log("🚀 ~ newVal:", newVal);
        if (newVal.query.stepsactive) {
          this.stepsactive = Number(newVal.query.stepsactive);
        } else {
          this.stepsactive = 1;
        }
      },
      immediate: true,
    },
  },
  methods: {
    bindselectservice(item) {
      this.$router.push({
        name: item.name,
        query: {
          stepsactive: item.stepsactive,
        },
      });
    },
    fanhui() {
      if (this.$route.query.stepsactive) {
        this.$router.go(-1);
      } else {
        this.$router.push({ name: "FServe" });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.view {
  width: 100%;
  display: flex;
  align-items: center;
}

.view-content {
  margin-top: 20px;
}

.card {
  padding: 10px;
  transition: all 0.2s linear;
  cursor: pointer;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
}

.view-item-label {
  text-align: center;
}
</style>
